<template>
  <el-container class="index">
    <el-header>
      <h1>电商后台管理系统</h1>
      <div class="break-login">
        你好! <span class="user-name"> {{ userName }}</span>
        <el-button :plain="true" @click="breakLogin">退出登录</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside width="230px">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              router
              default-active="/index/users"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
<!--       循环熏染       -->
              <el-submenu :index='item.path'
                v-for="item of routes" :key="item.id"
              >
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{ item.authName }}</span>
                </template>
                <el-menu-item
                  v-for="children of item.children"
                  :key="children.id"
                  :route="{ path: `/index/${children.path}` }"
                  :index="`/index/${children.path}`"
                  >{{ children.authName }}</el-menu-item
                >
              </el-submenu>
<!--       循环熏染       -->
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ADD_USER } from '@/store/user/CONST'

@Component
export default class Index extends Vue {
  public get userName () {
    const user = localStorage.getItem('user')
    if (!user) return
    const result = JSON.parse(user)
    return result.name
  }

  public get routes () {
    return this.$store.state.routes
  }

  mounted () {
    //
  }

  handleOpen (key: any, keyPath: any) {
    console.log('打开用户管理')
  }

  handleClose (key: any, keyPath: any) {
    console.log('关闭用户管理')
  }

  // 退出登录
  breakLogin () {
    this.confirm()
  }

  // 提示框
  open (
    smg = '登陆成功',
    type: 'success' | 'warning' | 'info' | 'error' = 'success'
  ) {
    this.$message({
      message: smg,
      type: type
    })
  }

  confirm () {
    this.$confirm('此操作将退出登录, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(
      () => {
        this.open('退出成功')
        localStorage.removeItem('user')
        setTimeout(() => {
          this.$router.push('/login')
        }, 500)
      },
      () => {
        this.open('取消退出登录', 'warning')
      }
    )
  }

  created () {
    //
  }
}
</script>

<style lang="less" scoped>
.el-header {
  position: relative;
  display: flex;
  align-items: center;
  height: 100px;
  background-color: #e5dbb2;
  .break-login {
    position: absolute;
    right: 5%;
  }
  .user-name {
    margin-right: 10px;
    font-weight: 600;
    color: #8d5abe;
  }
}
.el-aside {
  width: 300px;
  background-color: #a9d7d9;
  .el-col-12 {
    width: 100%;
  }
}
.el-main {
  background-color: #e7bdbd;
}
</style>
